#s2masteries {
    background: url(//game.gtimg.cn/images/lol/guide2016/content_tile.jpg) repeat-y;
    background-color: #EFE0AA;
    font: 11px Arial, Helvetica, sans-serif;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    margin: 40px auto; /* 50 */
    width: 932px; /* 932 */
    height: 624px;
    padding: 40px;
    position: relative;
}

#panel {
    width: 920px;
    height: 80px;
    position: relative;
    cursor: default;
}

#calculator {
    background: url(//game.gtimg.cn/images/lol/guide2016/masteries-background.jpg);
    width: 828px;
    height: 479px;
    position: relative;
    margin: 0 auto;
}

.art-top {
    width: 100%;
    height: 234px;
    background: url(//game.gtimg.cn/images/lol/guide2016/content_top.png);
    position: absolute;
    top: 0;
    left: 0;
}

.art-bottom {
    width: 100%;
    height: 150px;
    background: url(//game.gtimg.cn/images/lol/guide2016/content_bot.jpg);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* --- Panel ---------------------------------------------------------------- */
#points {
    font-size: 18px;
    margin-right: 30px;
    margin-bottom: 10px;
}
#exportLink {
    font-size: 18px;
    margin-right: 0px;
    color: #000;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}
.center {
    text-align: center;
    margin: 0 auto 15px;
}
.right {
    position: absolute;
    right: 0;
    top: 0;
}


button {
    cursor: pointer;
    width: 130px;
    padding: 3px;
    font-size: 16px;
    color: #fff;
    margin: 0;
    border: 1px outset #3467A7;
    border-radius: 4px;
    background-color: #0F325B;
}
button:hover {
    background: -moz-linear-gradient(top, rgba(86,121,165,1) 1%, rgba(20,57,100,1) 50%, rgba(14,40,72,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(86,121,165,1)), color-stop(50%,rgba(20,57,100,1)), color-stop(100%,rgba(14,40,72,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(86,121,165,1) 1%,rgba(20,57,100,1) 50%,rgba(14,40,72,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(86,121,165,1) 1%,rgba(20,57,100,1) 50%,rgba(14,40,72,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(86,121,165,1) 1%,rgba(20,57,100,1) 50%,rgba(14,40,72,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(86,121,165,1) 1%,rgba(20,57,100,1) 50%,rgba(14,40,72,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5679a5', endColorstr='#0e2848',GradientType=0 ); /* IE6-9 */
}
button,
button:active {
    background: -moz-linear-gradient(top, rgba(52,103,167,1) 0%, rgba(20,57,100,1) 50%, rgba(14,40,72,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,103,167,1)), color-stop(50%,rgba(20,57,100,1)), color-stop(100%,rgba(14,40,72,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(52,103,167,1) 0%,rgba(20,57,100,1) 50%,rgba(14,40,72,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(52,103,167,1) 0%,rgba(20,57,100,1) 50%,rgba(14,40,72,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(52,103,167,1) 0%,rgba(20,57,100,1) 50%,rgba(14,40,72,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(52,103,167,1) 0%,rgba(20,57,100,1) 50%,rgba(14,40,72,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3467a7', endColorstr='#0e2848',GradientType=0 ); /* IE6-9 */
}
button:active {
    border-style: inset;
}


#tree-summaries {
    height: 40px;
    position: relative;
    width: 100%;
    margin-bottom: 4px;
}
.tree-summary {
    width: 160px;
    height: 30px;
  color:#fff;
    padding-left: 0px;
    background-repeat: no-repeat;
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    
}
#tree-summaries .Ferocity{
    background-position: 0px 0px;
}
#tree-summaries .Cunning {
    background-position: 0px -43px;
}
#tree-summaries .Resolve{
    background-position: 0px -86px;
}


/* --- Calculator ----------------------------------------------------------- */
.tree-label {
    color: #fefefe;
    position: absolute;
    font-weight: bolder;
    font-size: 15px;
    letter-spacing: 1px;
}

.tbtn {
    width: 52px;
    height: 52px;
    position: absolute;
    cursor: pointer;
    /*border: 2px solid #999;*/
    border-radius: 2px;
    z-index: 1;
    background-image: url(//ossweb-img.qq.com/images/lpl/web201612/sprite-tianfu.jpg);
}

.tbtn.unavailable {
    border-color: #999;
    cursor: default;
	-webkit-animation: animation_unavailable 1s; /* Chrome, Safari, Opera */
	animation: animation_unavailable 1s;
}
.tbtn.available {
    border-color: #00ff00;
	-webkit-animation: animation_available 1s; /* Chrome, Safari, Opera */
    animation: animation_available 1s;
}
.btn.full {
    border-color: #d4b654;
	-webkit-animation: animation_full 1s; /* Chrome, Safari, Opera */
	animation: animation_full 1s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animation_available  {
    25%  {border-color: #fff;}
    100% {border-color: #00ff00;}
}

/* Standard syntax */
@keyframes animation_available  {
    25%  {border-color: #fff;}
    100% {border-color: #00ff00;}
} 

/* Chrome, Safari, Opera */
@-webkit-keyframes animation_unavailable {
    25%  {opacity: 0.8;}
    100% {opacity: 1.0}
}

/* Standard syntax */
@keyframes animation_unavailable {
	0% {border-color: #00ff00;}
    25%  {opacity: 0.8; border-color: #999;}
    100% {opacity: 1.0}
} 

/* Chrome, Safari, Opera */
@-webkit-keyframes animation_full {
    25%  {border-color: #fff;}
    100% {border-color: #d4b654;}
}

/* Standard syntax */
@keyframes animation_full {
    25%  {border-color: #aa8822;}
    100% {border-color: #d4b654;}
} 

#tooltip {
    display: none;
    color: #fefefe;
    width: 180px;
    padding: 5px;
    background: #000;
    position: absolute;
    z-index: 100;
    border: 2px solid #323635;
    border-radius: 5px;
}
#tooltip strong {
    font-size: 13px;
    font-weight: bolder;
}
#tooltip p {
    margin-bottom: 0px;
}
#tooltip .highlight {
    color: #fecb00;
}
#tooltip .req {
    color: #ff0000;
}
#tooltip.custom {
    width: auto;
}
#tooltip.custom p {
    margin-top: 0px;
}

.counter {
    position: absolute;
    right: 2px;
    bottom: -7px;
    background-color: #000;
    border: 2px solid #0060a0;
    border-radius: 2px;
    font-size: 11px;
    padding: 0px 5px;
}
.counter-unavailable {
	border: 2px solid #999;
    color: #999;
}
.counter-available {
	border: 2px solid #0060a0;
	color: #0080a0;
}
.counter-full {
	border: 2px solid #d4b654;
    color: #d4b654;
}

.num-unavailable {
    color: #999;
}
.num-available {
    color: #00ff00;
}
.num-full {
    color: #d4b654;
}

.buttonFrame  {
	width: 76px;
	height: 76px;
    position: absolute;
	left: -11px;
	top: -11px;
	background: url(//game.gtimg.cn/images/lol/guide2016/frames.png);
}

#tooltip .Ferocity {
    color: #b83200;
}
#tooltip .Cunning{
    color: #b853ee;
}
#tooltip .Resolve {
    color: #46a3ee;
}
#soundinfo {
	font-size: 14px;
}

#footer {
    width: 920px;
    height: 80px;
    position: relative;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#volume{
	width: 100px;
	height: 13px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	cursor: pointer;
}


/* index css */
	
#footer {
	display: none;
}
	
.art-top {
	background: none;
	display: none;
}
	
.art-bottom {
	background: none;
	display: none;
}
	
#s2masteries {
	background: none;
	margin: 0 auto;
	padding: 0;
	width: 828px;
	margin: 0 auto;
}
	
#panel {
	padding-top: 50px;
	width: 828px;
	margin: 0 auto;
	height: 50px;
}
	
#panel .center {
	display: none;
}
	
.toolsBox {
	height: 80px;
	position: relative;
	margin-top: 40px;
}
	
#points {
	position: absolute;
	left: 0;
	right: 0;
}
	
#return {
	position: absolute;
	left: 0;
	top: 658px;
}
.tf0 .counter-unavailable,.tf1 .counter-unavailable,.tf2 .counter-unavailable,.tf3 .counter-unavailable,.tf4 .counter-unavailable,.tf5 .counter-unavailable,.tf6 .counter-unavailable.tf7 .counter-unavailable,.tf8 .counter-unavailable,.tf9 .counter-unavailable,.tf10 .counter-unavailable,.tf11 .counter-unavailable,.tf12 .counter-unavailable,.tf13 .counter-unavailable,.tf14 .counter-unavailable,.tf15 .counter-unavailable,.tf16 .counter-unavailable,.tf17 .counter-unavailable,.tf18 .counter-unavailable,.tf19 .counter-unavailable,.tf20 .counter-unavailable,.tf21 .counter-unavailable,.tf22 .counter-unavailable,.tf23 .counter-unavailable,.tf24 .counter-unavailable,.tf25 .counter-unavailable,.tf26 .counter-unavailable,.tf27 .counter-unavailable,.tf28 .counter-unavailable,.tf29 .counter-unavailable,.tf30 .counter-unavailable,.tf31 .counter-unavailable,.tf32 .counter-unavailable.tf33 .counter-unavailable,.tf34 .counter-unavailable,.tf35 .counter-unavailable,.tf36 .counter-unavailable,.tf37 .counter-unavailable,.tf38 .counter-unavailable,.tf39 .counter-unavailable,.tf40 .counter-unavailable,.tf41 .counter-unavailable,.tf42 .counter-unavailable,.tf43 .counter-unavailable,.tf44 .counter-unavailable{border: 2px solid #d4b654;color: #d4b654;}

.tf0{background-position: -106px -2px;left: 78px;top: 20px;}
.on .tf0{background-position: -160px -2px;}

.tf1{background-position: -106px -56px;left: 148px;top: 20px;}
.on .tf1{background-position: -163px -56px;}

.tf2{background-position:-109px -109px;left: 44px;top: 94px;}
.on .tf2{background-position:-163px -109px;}

.tf3{background-position:-270px -164px;left: 111px;top: 94px;}
.on .tf3{background-position:-163px -164px;;}

.tf4{background-position:-109px -218px;left: 178px;top: 94px;}
.on .tf4{background-position:-163px -218px;}

.tf5{background-position:-109px -272px;left: 78px;top: 168px;}
.on .tf5{background-position:-163px -272px;}

.tf6{background-position:-109px -326px;left: 148px;top: 168px;}
.on .tf6{background-position:-163px -326px;}

.tf7{background-position: -109px -380px;left: 44px;top: 242px;}
.on .tf7{background-position: -163px -380px;}

.tf8{background-position: -109px -434px;left: 111px;top: 242px;}
.on .tf8{background-position: -163px -434px;}

.tf9{background-position: -109px -488px;left: 178px;top: 242px;}
.on .tf9{background-position: -163px -488px;}

.tf10{background-position: -109px -538px;left: 78px;top: 316px;}
.on .tf10{background-position: -163px -538px;}

.tf11{background-position: -109px -591px;left: 148px;top: 316px;}
.on .tf11{background-position: -163px -591px;}

.tf12{background-position: -109px -645px;left: 44px;top: 390px;}
.on .tf12{background-position: -163px -645px;}

.tf13{background-position: -109px -699px;left: 111px;top: 390px;}
.on .tf13{background-position: -163px -699px;}

.tf14{background-position: -109px -758px;left: 178px;top: 390px;}
.on .tf14{background-position: -163px -758px;}

.tf15{background-position: -109px -812px;left: 352px;top: 20px;}
.on .tf15{background-position: -163px -812px;}

.tf16{background-position: -109px -866px;left: 424px;top: 20px;}
.on .tf16{background-position: -163px -866px;}

.tf17{background-position: -109px -920px;left: 320px;top: 94px;}
.on .tf17{background-position: -163px -920px;}

.tf18{background-position: -109px -974px;left: 387px;top: 94px;}
.on .tf18{background-position: -163px -974px;}

.tf19{background-position: -109px -1028px;left: 454px;top: 94px;}
.on .tf19{background-position: -163px -1028px;}

.tf20{background-position: -109px -1082px;left: 352px;top: 168px;}
.on .tf20{background-position: -163px -1082px;}

.tf21{background-position: -109px -1136px;left: 424px;top: 168px;}
.on .tf21{background-position: -163px -1136px;}

.tf22{background-position: -109px -1190px;left: 320px;top: 242px;}
.on .tf22{background-position: -163px -1190px;}

.tf23{background-position: -109px -1244px;left: 387px;top: 242px;}
.on .tf23{background-position: -163px -1244px;}

.tf24{background-position: -109px -1298px;left: 454px;top: 242px;}
.on .tf24{background-position: -163px -1298px;}

.tf25{background-position: -109px -1352px;left: 352px;top: 316px;}
.on .tf25{background-position: -163px -1352px;}

.tf26{background-position: -109px -1406px;left: 424px;top: 316px;}
.on .tf26{background-position: -163px -1406px;}

.tf27{background-position: -109px -1460px;left: 320px;top: 390px;}
.on .tf27{background-position: -163px -1460px;}

.tf28{background-position: -109px -1514px;left: 387px;top: 390px;}
.on .tf28{background-position: -163px -1514px;}

.tf29{background-position: -109px -1568px;left: 454px;top: 390px;}
.on .tf29{background-position: -163px -1568px;}

.tf30{background-position: -109px -1622px;left: 631px;top: 20px;}
.on .tf30{background-position: -163px -1622px;}

.tf31{background-position: -109px -1676px;left: 698px;top: 20px;}
.on .tf31{background-position: -163px -1676px;}

.tf32{background-position: -109px -1730px;left: 596px;top: 94px;}
.on .tf32{background-position: -163px -1730px;}

.tf33{background-position: -109px -1784px;left: 663px;top: 94px;}
.on .tf33{background-position: -163px -1784px;}

.tf34{background-position: -109px -1838px;left: 730px;top: 94px;}
.on .tf34{background-position: -163px -1838px;}

.tf35{background-position: -109px -1892px;left: 631px;top: 168px;}
.on .tf35{background-position: -163px -1892px;}

.tf36{background-position: -109px -1946px;left: 698px;top: 168px;}
.on .tf36{background-position: -163px -1946px;}

.tf37{background-position: -109px -2000px;left: 596px;top: 242px;}
.on .tf37{background-position: -163px -2000px;}

.tf38{background-position: -109px -2054px;left: 663px;top: 242px;}
.on .tf38{background-position: -163px -2054px;}

.tf39{background-position: -109px -2108px;left: 730px;top: 242px;}
.on .tf39{background-position: -163px -2108px;}

.tf40{background-position: -109px -2162px;left: 631px;top: 316px;}
.on .tf40{background-position: -163px -2162px;}

.tf41{background-position: -109px -2211px;left: 698px;top: 316px;}
.on .tf41{background-position: -163px -2211px;}

.tf42{background-position: -109px -2265px;left: 596px;top: 390px;}
.on .tf42{background-position: -163px -2265px;}

.tf43{background-position: -109px -2321px;left: 663px;top: 390px;}
.on .tf43{background-position: -163px -2321px;}

.tf44{background-position: -109px -2375px;left: 730px;top: 390px;}
.on .tf44{background-position: -163px -2375px;}

/*  |xGv00|6d732c5b746438be51cec6b76c5d936a */